<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- J D Eisenberg -->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
  xmlns:xlink="http://www.w3.org/1999/xlink">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Pattern and Gradient Transformations</title>
  <link rel="stylesheet" type="text/css" href="../svg_style.css">
  <script type="text/javascript" src="../svg_utils.js"></script>
  <script type="text/javascript">
  //<![CDATA[

  function update(n)
  {
    var gradient = getValue("gradientTransform") + "("
      + getValue("gradientAngle") + ")";
    var pattern = getValue("patternTransform") + "("
      + getValue("patternAngle") + ")";
    setAttr("gradient", "gradientTransform", gradient);
    setAttr("tile", "patternTransform", pattern);
  }
  
  // ]]>
  </script>
</head>

<body onload="initElements(); update()">

<div id="svgInput">
<pre style="font-size:10pt">&lt;svg width="250" height="150" viewBox="0 0 250 150"&gt;
  &lt;defs&gt;
    &lt;pattern id="tile" x="0" y="0" width="20%" height="20%"
      patternUnits="objectBoundingBox"
      patternTransform="<select id="patternTransform" onchange="update()">
      <option value="rotate">rotate</option>
      <option value="skewX">skewX</option>
      <option value="skewY" selected="selected">skewY</option>
      </select>(<input id="patternAngle" value="15" type="text" size="3" onchange="update()"/>)"&gt;
      &lt;path d="M 0 0 Q 5 20 10 10 T 20 20"
        style="stroke: black; fill: none;"/&gt;
      &lt;path d="M 0 0 h 20 v 20 h -20 z"
        style="stroke: gray; fill: none;"/&gt;
    &lt;/pattern&gt;

    &lt;linearGradient id="gradient"
      gradientTransform="<select id="gradientTransform" onchange="update()">
      <option value="rotate">rotate</option>
      <option value="skewX" selected="selected">skewX</option>
      <option value="skewY">skewY</option>
      </select>(<input id="gradientAngle" value="10" type="text" size="3" onchange="update()"/>)"&gt;
        &lt;stop offset="0%" style="stop-color: #ffcc00;"/&gt;
        &lt;stop offset="33.3%" style="stop-color: #cc6699"/&gt;
        &lt;stop offset="100%" style="stop-color: #66cc99;"/&gt;
    &lt;/linearGradient&gt;
  &lt;/defs&gt;
  
  &lt;rect x="20" y="10" width="100" height="100"
    style="fill: url(#tile); stroke: black;"/&gt;
  &lt;rect x="135" y="10" width="100" height="100"
    style="fill: url(#gradient); stroke: black;"/&gt;
&lt;/svg&gt;</pre>
<div id="svgError"></div>
<div>
  <input type="checkbox" id="svgShowError" /> <!--Show SVG Errors-->
</div>
</div> <!-- svgInput-->

<div id="svgOutput">
<svg width="250" height="150" viewBox="0 0 250 150" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="gradient"
      gradientTransform="skewX(10)">
        <stop offset="0%" style="stop-color: #ffcc00;"/>
        <stop offset="33.3%" style="stop-color: #cc6699"/>
        <stop offset="100%" style="stop-color: #66cc99;"/>
    </linearGradient>

    <pattern id="tile" x="0" y="0" width="20%" height="20%"
      patternUnits="objectBoundingBox"
      patternTransform="skewY(15)">
      <path d="M 0 0 Q 5 20 10 10 T 20 20"
        style="stroke: black; fill: none;"/>
      <path d="M 0 0 h 20 v 20 h -20 z"
        style="stroke: gray; fill: none;"/>
    </pattern>
  </defs>
  
  <rect x="20" y="10" width="100" height="100"
    style="fill: url(#tile); stroke: black;"/>
  <rect x="135" y="10" width="100" height="100"
    style="fill: url(#gradient); stroke: black;"/>
</svg>
</div>

</body>
</html>
